<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/tag_lib.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>스프링 테스트 예제</title>
		<script type="text/javascript">
		    function hidePhoto() {
		    	$('#photo').slideUp('slow');
		    }
		
			// 사진을 가져온다.
	        function getPhoto(photoId) {
		        var imageSrc;
		        var imageWidth;
		        var imageHeight;

		        // 사진 크기 별로 가져와 제일 큰 사진을 출력할 수 있도록 준비한다.
	        	var getSizes = 'http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=' + $('#apiKey').val() + '&photo_id=' + photoId + '&format=json&jsoncallback=?';
	        	$.getJSON(getSizes,
	    	        	function(data) {
	        		        imageSrc = data.sizes.size[data.sizes.size.length - 1].source;
	        		        imageWidth = data.sizes.size[data.sizes.size.length - 1].width;
	        		        imageHeight = data.sizes.size[data.sizes.size.length - 1].height;
	        	        }
	        	);

	        	// 사진의 정보를 가져온다.
	            var getInfo = 'http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=' + $('#apiKey').val() + '&photo_id=' + photoId + '&format=json&jsoncallback=?';
	            $.getJSON(getInfo, 
	    	            function(data) {
    	                    var photo = data.photo;

    	                    $('#photoSrc').empty();
    	                    $('#photoTitle').empty();
    	                    $('#photoDescription').empty();
    	                    
    	                    $('#photoSrc').append('<img src=\"' + imageSrc + '\" /><br />');
    	                    if(imageWidth > 500) 
        	                    $('#photo img').attr('width', '500');
    	                    $('#photoSrc').append('<a href="javascript:hidePhoto();">목록으로</a>');
    	                    $('#photoTitle').append(photo['title']['_content']);
    	                    $('#photoDescription').append(photo['description']['_content'] + '<br />');
	                    }
	            );

	            // 목록을  지운다.
                $('#photoCommentList').empty();
                
	            // Get 으로 코멘트 목록을 가져온다.
                $.getJSON('./getCommentList.jude',
                       { 'photoId' : photoId },
                       function(data) {
                    	   if(data.model.commentList.length > 0 ) {
	                           $('#photoCommentList').append('<table><thead><tr><td>SEQ</td><td>COMMENT</td><td>MEMBER</td></tr></thead><tbody></tbody></table>');
	                           var commentRow = $('#photoCommentList tbody');
	                           $.each(data.model.commentList, function(index, comment) {
	                                   commentRow.append('<tr><td>' + comment['seq'] + '</td><td>' + comment['photoComment'] + '</td><td>' + comment['creatorNo'] + '</td></tr>');
	                               }
	                           );                       
                    	   }
                       }
                );

                $('#photo').slideDown('slow');
	        }

		
		    // 해당 페이지의 사진 목록을 가져온다.
	        function getPage(pageNo) {
	        	$('#page').val(pageNo); 
		        getPhotoList();
	        }
		
		    // 사진 목록을 가져온다.
			function getPhotoList() {
	            var action = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=' + $('#apiKey').val()
	                         + '&page=' + $('#page').val() + '&per_page=' + $('#perPage').val()
	                         + '&user_id=35682875@N02&format=json&jsoncallback=?';

                $.getJSON(action, 
	    	            function(data) {
	            	        $('#json').append(data.photos.page + "|" + data.photos.pages);

	            	        // 페이징 만들기
	            	        $('#paginated').empty();
	            	        var paging = '현재 ' + data.photos.page + '페이지 / 총 ' + data.photos.pages + ' 페이지';
	            	        if(data.photos.page != 1) {
		            	        paging += '<a href="javascript:getPage(' + (data.photos.page - 1) + ');"><&nbsp;이전페이지</a>';
		            	    } 
		            	    paging += '&nbsp;&nbsp;';
		            	    if(data.photos.page != data.photos.pages) {
		            	        paging += '<a href="javascript:getPage(' + (data.photos.page + 1) + ');">다음페이지&nbsp;></a>';
		            	    }
	            	        
	            	        $('#paginated').append(paging);

	            	        // 사진 추가 시 사용할 Row handler
	                        var tbody = $('#photoList tbody');

	            	        // 사진 목록을 제거한다.
	                        tbody.empty();
	                        
	            	        // 3 photos / row
	                        $.each(data.photos.photo, function(index, photo) {
		                        if(index % 3 == 0) {
		                        	tbody.append('<tr>');
			                    }

			                    // Image URL형식 : http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
			                    var photoRow = '<td>';
			                    photoRow += '<span id="title">' + photo['title'] + '</span><br />';
			                    // photoRow += '<a href=\"./read.jude?photoId=' + photo['id'] + '\">';
			                    photoRow += '<a href=\"javascript:getPhoto(' + photo['id'] + ')\">';
			                    photoRow += '<img src=\"http://farm' + photo['farm'] + '.static.flickr.com/' + photo['server'] + '/' + photo['id'] + '_' + photo['secret'] + '_m.jpg\" /></a>';
			                    photoRow += '</td>';

			                    tbody.append(photoRow);
	                            if(index % 3 == 0) {
	                            	tbody.append('</tr>');
                                }
	                        });
	                    }
                );
		          
	        }
	        
			//jQuery
			$(document).ready(
			    function(){
			    	getPhotoList();
			    	$('#photo').hide();
				}
			);
		</script>
	</head>
	<body>
	    <p>Photo List</p>
	    <p>
	       Per page : <input type="text" id="perPage" value="3" /><br />
	       Page : <input type="text" id="page" value="1" /><br />
	       <input type="button" onclick="getPhotoList();" value="가져오기" />
	    </p>
	    <hr />
	    <div id="json"></div>
	    <div id="paginated"></div>
	    <hr />
	    <div id="photo">
	       <table id="photoTable">
                <tbody>
                    <tr>
                        <td rowspan="3"><span id="photoSrc"></span></td>
                        <td><span id="photoTitle"></span></td>                    
                    </tr>
                    <tr>
                        <td><span id="photoDescription"></span></td>
                    </tr>
                    <tr>
                        <td><span id="photoCommentList"></span></td>
                    </tr>
                </tbody>
            </table>
	    </div>
	    <hr />
        <div id="photoList">
            <table id="photoListTable">
                <tbody></tbody>
            </table>
        </div>
        <hr />
        <a href="./form.jude?mode=create&auth_token=${photo.auth_token}">Form(Create) Photo</a>&nbsp;
        <input type="hidden" id="apiKey" value="${photo.api_key }" />
        <input type="hidden" id="secret" value="${photo.secret }" />
        <input type="hidden" id="frob" value="${photo.frob }" />
        <input type="hidden" id="authToken" value="${photo.auth_token}" />
	</body>
</html>